<script setup lang='ts'>
  import { reactive } from 'vue';
  import { rankingID } from '@/pinia/getter';
  import { xmloading, xmtoast } from '@/utils/public';
  import request from '@/api/index';
  import xmdialog from '@/components/xmdialog.vue';
  const $emit = defineEmits(['change'])
  interface infoQuery {
    name:string
    image:string
    day_type:number
    data_num:number
  }
  const action = reactive({
    propShow:false,
    ymd:'',
    reward_info:{
      status:0,
      rank_num:0,
    },
    rewardInfoArr:[] as Array<infoQuery>
  })
  const handleReceive = async()=>{
    const loading = xmloading('领取中...')
    await request.bankRewardGet({
      rank_id:rankingID.value,
      ymd:action.ymd
    })
    loading.close()
    xmtoast('领取成功')
    action.reward_info = {
      status:0,
      rank_num:0,
    }
    action.rewardInfoArr = []
    action.propShow = false
    $emit('change')
  }
  const openDialog = (query:any = {})=>{
    const { reward_info={}, ymd=''} = query
    const { rewardInfoList=[] } = reward_info
    action.propShow = true
    action.ymd = ymd
    action.reward_info = reward_info
    action.rewardInfoArr = rewardInfoList
  }
  defineExpose({
    openDialog
  })
</script>
<template>
  <xmdialog v-model:dialogshow="action.propShow">
    <div class="rewardBack">
      <div class="overflow flex-align">
        <div v-for="item in action.rewardInfoArr"class="goodsBox">
          <div class="goodsImg">
            <xmimg :src="item.image" />
          </div>
          <div class="name textStyle">
            <!-- <template v-if="[6,7].indexOf(item.day_type) > -1">
              {{ item.data_num }}{{ rewardType.find(res=> res.type == item.day_type )?.text }}
            </template>
            <template v-else>
              {{ item.name }}
            </template> -->
            {{ item.data_num }}{{ item.name }}
          </div>
        </div>
      </div>
      <xmimg @click="handleReceive" src="ranking/rewardBut.png" class="butImage" />
    </div>
  </xmdialog>
</template>

<style lang='scss' scoped>
  :deep(.dialog-popup) {
    --van-padding-md:0px;
    .Functionality {
      position: relative;
      padding: 19px 0 0;
      box-sizing: border-box;
      .titleimg {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        height: 38px;
      }
      .rewardBack {
        width: 282px;
        height: 214px;
        padding: 18px;
        box-sizing: border-box;
        background: var(--rewardBackImage) left top / 100% 100% no-repeat;
      }
    }
  }
  .overflow {
    overflow-y: hidden;
    overflow-x: auto;
  }
  .overflow::-webkit-scrollbar {
    display: none;
  }
  .goodsBox {
    margin-right: 12px;
    .goodsImg {
      width: 88px;
      height: 88px;
      background: var(--rewardImageBackColor);
      border-radius: 14px;
    }
    .name {
      color: var(--rewardTextColor);
      font-weight: 500;
      font-size: 14px;
      text-align: center;
      margin-top: 8px;
    }
  }
  .goodsBox:nth-last-child(1) {
    margin-right: 0;
  }
  .butImage {
    width: 120px;
    height: 40px;
    margin: 20px auto;
  }
</style>